<template>
  <div class="typeNav">
    <el-popover
      popper-class="sortPop"
      placement="bottom-start"
      width="350"
      trigger="hover"
    >
      <span slot="reference">{{ hotTagTop.name }} ></span>
      <div class="typeBox">
        <span
          class="hotType"
          :class="{ hotTypeActive: hotTagTop.name === item.name }"
          v-for="(item, index) in hotType"
          :key="index"
          @click="selectType(item)"
          >{{ item.name }}</span
        >
      </div>
    </el-popover>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    hotTagTop: {
      type: Object,
      default() {
        return {}
      }
    },
    hotType: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    selectType(item) {
      this.$emit('updataHotTagTop', item)
      // console.log(name)
    }
  }
}
</script>
<style lang="scss" scoped>
.typeNav {
  border: 1px solid #ccc;
  border-radius: 15px;
  transition: all 0.5s;
  &:hover {
    box-shadow: 4px 4px 4px rgba(225, 134, 134, 0.3);
    // background: blur(10px);
    border-color: rgb(225, 134, 134);
    transform: translateY(-3px);
    :deep(.el-popover__reference) {
      color: #eb4f4f;
    }
  }
}
:deep(.el-popover__reference) {
  color: #999;
  padding: 5px 10px 5px 10px;
  cursor: pointer;
  transition: all 0.5s;
}
.hotTypeActive {
  background-color: #fcebeb;
  color: #eb4f4f;
}
.typeBox {
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
  height: 400px;
  overflow-y: scroll;
}
.hotType {
  padding: 5px 0;
  width: 25%;
  text-align: center;
  border-radius: 13px;
  transition: all 0.5s;
  &:hover {
    background-color: #fcebeb;
    color: #eb4f4f;
  }
}
</style>
